<template>
  <div>
    <el-table :data="applyList" style="width: 100%" border>
      <el-table-column label="ID" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请内容" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.resource }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否已处理" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isDispose"
            style="display: block"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="已处理"
            inactive-text="未处理"
            @change="isHandle(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="修改时间" width="230">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="detail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="查看详情" :visible.sync="isShow">
      <el-row :gutter="20" class="elRow">
        <el-col :span="6"> 姓名： </el-col>
        <el-col :span="12"> {{ dialogData.name }} </el-col>
      </el-row>
      <el-row :gutter="20" class="elRow">
        <el-col :span="6"> 手机号码： </el-col>
        <el-col :span="12"> {{ dialogData.phone }} </el-col>
      </el-row>
      <el-row :gutter="20" class="elRow">
        <el-col :span="6"> 申请内容：</el-col>
        <el-col :span="16">
          {{ dialogData.resource }}
        </el-col>
      </el-row>
      <el-row :gutter="20" class="elRow">
        <el-col :span="6"> 是否已回复： </el-col>
        <el-col :span="12" class="elRow">
          {{ dialogData.isDispose ? '已回复' : '未回复' }}
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close"> 关闭 </el-button>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close"> 关闭 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getApplyList, changeApplyState } from '@/api/apply'
export default {
  data() {
    return {
      applyList: [],
      isShow: false,
      dialogData: {
        name: '',
        phone: '',
        resource: '',
        isDispose: ''
      }
    }
  },
  created() {
    this.iniApplyList()
  },
  methods: {
    async iniApplyList() {
      const res = await getApplyList()
      this.applyList = res.data
      console.log(this.applyList)
    },
    detail(val) {
      this.isShow = true
      this.dialogData = val
    },
    close() {
      this.isShow = false
      this.dialogData = {
        name: '',
        phone: '',
        resource: '',
        isDispose: ''
      }
    },
    async isHandle(row) {
      const res = await changeApplyState({
        id: row._id,
        isDispose: row.isDispose
      })
      if (res.code === 20000) {
        this.$message({
          type: 'success',
          message: res.message
        })
      }
      this.iniApplyList()
    }
  }
}
</script>

<style lang="scss" scoped></style>
